<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%><%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insertDefinition name="layout">
	<tiles:putAttribute name="head">
		<script type="text/javascript">
			$(function() {
				var startDate;
				var endDate;

				var selectCurrentWeek = function() {
					window.setTimeout(function() {
						$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
					}, 1);
				};

				$(".scroll").click(function() {
					var t = $(this).attr("href");
					$("html,body").animate({
						scrollTop : $(t).offset().top - 60
					}, "fast");
				});

				$('.week-picker').datepicker({
					showWeek : true,
					firstDay : 1,
					dateFormat : 'yy-mm-dd',
					showOtherMonths : true,
					selectOtherMonths : true,
					onSelect : function(dateText, inst) {
						var date = $(this).datepicker('getDate');
						// 从周一开始选择
						startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
						endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 7);
						var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
						$('#startDate').val($.datepicker.formatDate(dateFormat, startDate, inst.settings));
						$('#endDate').val($.datepicker.formatDate(dateFormat, endDate, inst.settings));

						selectCurrentWeek();
					},
					beforeShowDay : function(date) {
						var cssClass = '';
						if (date >= startDate && date <= endDate)
							cssClass = 'ui-datepicker-current-day';
						return [ true, cssClass ];
					},
					onChangeMonthYear : function(year, month, inst) {
						selectCurrentWeek();
					},
					onClose : function() {
						$("form").submit();
					}
				});

				$('.ui-datepicker-calendar tr').live('mousemove', function() {
					$(this).find('td a').addClass('ui-state-hover');
				});
				$('.ui-datepicker-calendar tr').live('mouseleave', function() {
					$(this).find('td a').removeClass('ui-state-hover');
				});

				$(".btn-create").frameDialog({
					width : 800,
					height : 500,
					close : function() {
						location.reload();
					}
				});

				$(".btn-modify").frameDialog({
					width : 800,
					height : 500,
					close : function() {
						location.reload();
					}
				});
			});
		</script>
	</tiles:putAttribute>
	<tiles:putAttribute name="mainBody">
		<form class="form-horizontal">
			<input name="teacherId" value="${teacher.id }" type="hidden" />
			<fieldset>
				<legend>教员周课表：${teacher.name}</legend>
				<div class="control-group">
					<label class="control-label">日期选择</label>
					<div class="controls">
						<input type="text" class="input-small week-picker" id="startDate" name="startDate"
							value='<s:date name="#startDate" format="yyyy-MM-dd"/>' /> ~ <input class="input-small week-picker" type="text"
							id="endDate" name="endDate" value='<s:date name="#endDate" format="yyyy-MM-dd"/>'> 第${week}周
					</div>
				</div>
			</fieldset>
		</form>
		<ul class="nav nav-tabs">
			<li class="active"><a href="#周一" class="scroll">周一</a></li>
			<li><a href="#周二" class="scroll">周二</a></li>
			<li><a href="#周三" class="scroll">周三</a></li>
			<li><a href="#周四" class="scroll">周四</a></li>
			<li><a href="#周五" class="scroll">周五</a></li>
			<li><a href="#周六" class="scroll">周六</a></li>
			<li><a href="#周日" class="scroll">周日</a></li>
		</ul>
		<s:iterator value="#timePairs.keys" var="timePair">
			<table class="table">
				<caption>
					<s:url namespace="/lesson" action="listDailyLesson" id="listDailyLesson">
						<s:param name="startDate" value="getFormateDay(#timePairs[#timePair].startDate)"></s:param>
					</s:url>
					<a href="${listDailyLesson}" id="${timePair}">
						<s:date name="#timePairs[#timePair].startDate" format="yyyy-MM-dd" />
						(${timePair})
					</a>
				</caption>
				<thead>
					<tr>
						<th class="span2">Time</th>
						<th>Lesson</th>
						<th class="span2">Classroom</th>
						<th class="span2">Students</th>
					</tr>
				</thead>
				<tbody>
					<s:set name="reports" value="findReportByTeacherAndDay(#teacher, #timePairs[#timePair])"></s:set>
					<s:iterator value="#reports" var="report">
						<tr class="${report.teaching.lesson.courseType.cssClass}">
							<td>${report.teaching.timespan }</td>
							<td><s:url action="listListener" namespace="/lesson" id="listListener">
									<s:param name="id" value="teaching.lesson.id"></s:param>
								</s:url> <a href="${listListener}">${report.teaching.lesson.name}</a> <s:if test="canceled">
									<span class="label">已取消</span>
								</s:if></td>
							<td>${teaching.lesson.classroom.name}</td>
							<td>${report.count}</td>
						</tr>
					</s:iterator>
				</tbody>
			</table>
		</s:iterator>
	</tiles:putAttribute>
</tiles:insertDefinition>